<template>
  <!-- 使用 vant 组件库的 tabbar栏 -->
  <!-- route是开启路由   to 是指定跳转路由  border 是否显示外边框 -->
  <van-tabbar route :border="false">
    <van-tabbar-item to="/" icon="home-o">
      <span>首页</span>
      <!-- 使用van-tabbar-item的作用域插槽icon可以完成图标自定义和状态切换 -->
      <template #icon="props">
        <geek-icon :name="props.active ? 'home-sel' : 'home'"></geek-icon>
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/question" icon="search">
      <span>问答</span>
      <template #icon="props">
        <geek-icon :name="props.active ? 'qa-sel' : 'qa'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/video" icon="friends-o">
      <span>视频</span>
      <template #icon="props">
        <geek-icon :name="props.active ? 'video-sel' : 'video'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user" icon="setting-o">
      <span>我的</span>
      <template #icon="props">
        <geek-icon :name="props.active ? 'mine-sel' : 'mine'" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: 'AppTabbar'
}
</script>

<style scoped lang="less">
.van-tabbar {
  background: @geek-gray-color;
  position: static;
}
/deep/ .van-tabbar-item--active {
  color: @geek-color;
  background-color: @geek-gray-color;
}
/deep/ .van-tabbar-item__icon {
  font-size: 20px;
}
/deep/ .van-tabbar-item__text {
  font-size: 10px;
}
</style>
